<script setup>
import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

// 动态计算当前应高亮的菜单index（适配子路由）
const currentActivePath = computed(() => {
  const currentPath = route.path;
  
  // 定义所有一级菜单的index（与el-menu-item的index对应）
  const menuRootPaths = ['/back', '/back/adopt', '/back/user', '/back/person'];
  
  // // 1. 如果当前路径是一级菜单（如/、/adopt、/person），直接返回
  // if (menuRootPaths.includes(currentPath)) {
  //   return currentPath;
  // }
  
  // // 2. 如果是子路由（如/adopt/apply-data），提取父路径（/adopt）
  // const parentPath = currentPath.split('/').slice(0, 2).join('/'); // 分割路径取前两级
  // return menuRootPaths.includes(parentPath) ? parentPath : currentPath;

  // 遍历菜单根路径，找到当前路径最匹配的父路径（优先级：长路径 > 短路径）
  // 先按路径长度降序排序，确保优先匹配更长的父路径（如/back/adopt > /back）
  const sortedMenuPaths = [...menuRootPaths].sort((a, b) => b.length - a.length);
  
  // 找到当前路径以哪个菜单根路径开头
  const matchPath = sortedMenuPaths.find(path => currentPath.startsWith(path));
  
  // 兜底：匹配不到则返回当前路径（理论上不会触发）
  return matchPath || currentPath;
});

// 实现点击路由跳转
const handleNavigate = (path) => {
  router.push(path);
}
</script>

<template>
  <!-- :default-active="$route.path"：动态绑定当前激活的路由路径 -->
    <el-menu
        :default-active="currentActivePath"
        class="side-nav"
        background-color="#2A2A2A"
        text-color="#fff"
        active-text-color="#fff"
      >
        <!-- el-menu-item 的 index 属性需要与路由路径一致，这样 default-active 才能正确匹配并高亮当前项。 -->
        <el-menu-item class="menu-item" index="/back" @click="handleNavigate('/back')">
            <img src="/icon/pet-while.png" class="menu-icon" alt="宠物图标"/>
            <span>宠物管理</span>
        </el-menu-item>

        <el-menu-item class="menu-item" index="/back/adopt" @click="handleNavigate('/back/adopt')">
            <img src="/icon/Application-white.png" class="menu-icon" alt="宠物图标"/>
            <span>领养管理</span>
        </el-menu-item>
        <el-menu-item class="menu-item" index="/back/user" @click="handleNavigate('/back/user')">
            <img src="/icon/write.png" class="menu-icon" alt="宠物图标"/>
            <span>用户管理</span>
        </el-menu-item>

        <el-menu-item class="menu-item" index="/back/person" @click="handleNavigate('/back/person')">
            <img src="/icon/own-while.png" class="menu-icon" alt="宠物图标"/>
            <span>个人资料</span>
        </el-menu-item>
    </el-menu>
</template>

<style scope>
.side-nav {
  width: 172px;
  height: calc(100vh - 64px);
}

.side-nav .menu-item {
 width: 156px;   
 margin: 0 auto;
 margin-bottom: 16px;
 font-size: 16px;
}

.side-nav .menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}
.side-nav .el-menu-item.is-active {
  background-color: #4077FB;
  border-radius: 5px;
}
</style>